<template>
	<view class="page">
		<headerVue :title="title"></headerVue>
		<view class="banner flex align-center margin20">
			<view class="li flex-column align-center">
				<view class="num">{{ limit }}</view>
				<u-gap height="30"></u-gap>
				<view class="key">{{i18n.b9}}-USDT</view>
			</view>
			<!-- <view class="line"></view>
			<view class="li flex-column align-center">
				<view class="num">0</view>
				<u-gap height="30"></u-gap>
				<view class="key">待铸造额度-CAT</view>
			</view> -->
		</view>

		<view class="inpVue margin30 flex align-center">
			<input type="text" :placeholder="i18n.b10" v-model="quantity" />
			<view class="max" @click="quantity=limit">{{i18n.b11}}</view>
		</view>

		<view class="text-center margin30 padding30" style="color: rgba(255,255,255,0.5); line-height: 1;">
			{{i18n.b12}}AICAT：{{cost}}</view>


		<view class="btns flex-center margin30">
			<!-- <view class="btn">
				<image src="../../static/btn1.png" style="width: 100%; height: 100%;"></image>
			</view> -->
			<view class="btn" @click="submit()">
				<image src="../../static/btn2.png" style="width: 100%; height: 100%;"></image>
			</view>
		</view>

		<view class="tip text-center">{{i18n.b13}}</view>

		<view class="thVue flex margin40 padding-row30">
			<view class="li w25">USDT数量</view>
			<view class="li w30">AICAT数量</view>
			<view class="li w50 text-right">时间</view>
		</view>
		<view class="tdVue flex padding-row30 margin0" v-for="(item, index) in list" :key="index">
			<view class="li w25">{{item.usdtAmount}}</view>
			<view class="li w30">{{item.catAmount}}</view>
			<view class="li text-right w50">{{item.createTime}}</view>
		</view>
	</view>
</template>

<script>
	import wallet from "common/wallet";

	export default {
		data() {
			return {
				quantity: "",
				limit: 0,
				list: [],
				pageNum: 1,
				pageSize: 10,
				isLastPage: false,
				price: 0,
				cost: 0,
				type: 1,
				title: "",
			}
		},
		onLoad(option) {
			this.type = option.value;
			this.title = ["COO铸造", "CTO铸造", "CQO铸造"][this.type-1]
		},

		computed: {
			i18n() {
				return this.$t("message");
			}
		},

		async onShow() {
			await this.getInfo()
			await this.getList()
			await this.getPrice()
		},

		async onReachBottom() {
			if (this.isLastPage) return
			this.pageNum++
			await this.getList()
		},

		watch: {
			quantity() {
				this.cost = this.quantity * this.price
			}
		},


		methods: {
			async getInfo() {
				const result = await this.$request("/front/financial/mintQuota")
				if (result.code === 0) {
					this.limit = this.type == 1 ? result.data.remainQuota1 : result.data.remainQuota2;
				}
			},

			async getPrice() {
				const result = await this.$request("/front/financial/currencyPrice")
				if (result.code === 0) {
					this.price = result.data
					console.log(this.price)
				}
			},

			async getList() {
				const res = await this.$request("/front/financial/mintRecord", {
					type: this.type,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				if (res.code === 0) {
					this.list = this.list.concat(res.data.list)
					this.isLastPage = res.data.isLastPage
					console.log(this.list)
				}
			},

			// 立即铸造
			async submit() {
				if (!this.quantity || this.quantity == 0) return this.$u.toast("输入要消耗的USDT")
				const res = await this.$request("/front/financial/mint", {
					type: this.type,
					amount: this.quantity
				})
				if (res.code === 0) {
					await wallet.mintCat(res.data.signature, res.data.callData).then(res => {
						this.$u.toast(this.i18n8n.success)
						this.getInfo()
						this.quantity = ""
						this.list = []
						this.pageNum = 1
						this.getList()
					}).catch(err => {
						this.$u.toast(err.message)
					})
				} else {
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.banner {
		width: 670rpx;
		height: 282rpx;
		background: url("../../static/K.png") no-repeat;
		background-size: 100% 100%;

		.li {
			width: 100%;

			.num {
				font-weight: 600;
				font-size: 60rpx;
				color: #45F882;
				line-height: 1;
			}

			.key {
				color: rgba(255, 255, 255, 0.6);
				line-height: 1;
			}
		}

		.line {
			width: 1rpx;
			height: 110rpx;
			background: rgba(255, 255, 255, 0.2);
		}
	}

	.inpVue {
		width: 670rpx;
		height: 166rpx;
		background: url("../../static/K2.png") no-repeat;
		background-size: 100% 100%;
		padding: 0 30rpx;

		input {
			flex: 1;
			font-size: 32rpx;
		}

		.max {
			font-size: 32rpx;
			color: #45F882;
			text-decoration: underline;
		}
	}

	.btns {
		width: 670rpx;
		height: 90rpx;

		.btn {
			width: 327rpx;
			height: 90rpx;
		}
	}

	.tip {
		color: rgba(69, 248, 130, 0.8);
		line-height: 1;
		padding-top: 30rpx;
	}

	.tabVue {
		width: 670rpx;
		height: 98rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 49rpx;

		.tab {
			width: 50%;
			height: 98rpx;
			text-align: center;
			line-height: 98rpx;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.6);
		}

		.active {
			background: linear-gradient(270deg, #49BA29 0%, #C5DF24 100%);
			color: #0F0F13;
			border-radius: 49rpx;
			font-weight: 600;
		}
	}

	.thVue {
		width: 670rpx;
		height: 78rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 8rpx;

		.li {
			//width: 33.33333%;
			height: 78rpx;
			line-height: 78rpx;
			color: rgba(255, 255, 255, 0.6);
		}
	}

	.tdVue {
		width: 670rpx;
		height: 78rpx;

		.li {
			//width: 33.33333%;
			height: 78rpx;
			line-height: 78rpx;
			color: rgba(255, 255, 255, 0.6);
		}
	}

	.tdVue:nth-child(2n) {
		background: rgba(255, 255, 255, 0.03);
		;
	}
</style>